﻿@model MobiShop.Models.AccountRegisterModel
@using Microsoft.Web.Helpers
@using MobiShop.Models

@{  
    
    ViewBag.Title = "Đăng ký";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ReCaptcha.PublicKey = MobiShop.Models.AccountRegisterModel.publicGoogleCapchaKey;//System.Configuration.ConfigurationManager.AppSettings["publicGoogleCapchaKey"];

    List<SelectListItem> listThang = new List<SelectListItem>();
    SelectListItem item;
    for (int i = 0; i <= 12; i++)
    {
        item = new SelectListItem();
        item.Text = "Tháng " + i.ToString();
        item.Value = i.ToString();
        listThang.Add(item);
    }
    item = listThang[0];
    item.Text = "";
    item.Selected = true;
}


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/passwordStrengCheck.js")" type="text/javascript"></script>

<span style="color:green; font-style:italic;">@Html.Raw(ViewBag.ThongBao)</span>

@using (Html.BeginForm("Register", "Home", FormMethod.Post, new { @id = "frmRegister" }))
{
    @Html.ValidationSummary(true)
<fieldset>
    <legend>Thông tin cá nhân</legend>
    <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td style="width:150px" > 
                @Html.LabelFor(model => model.name)
            </td>
            <td>
                @Html.TextBoxFor(model => model.name, new { @class = "registerTextbox" })
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.address)
            </td>
            <td>
                @Html.TextAreaFor(model => model.address, new { @rows = "2", @cols = "30" })
                @Html.ValidationMessageFor(model => model.address, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                Ngày sinh
            </td>
            <td>
                @Html.TextBoxFor(model => model.dateOfBirth, new { @style = "width:21px", @maxlength = 2 })
                @Html.DropDownListFor(model => model.monthOfBirth, listThang, new { @style = "width:85px" })
                @Html.TextBoxFor(model => model.yearOfBirth, new { @style = "width:32px", @maxlength = 4 })
                <span id="errorForBirthDay" class="error-message" style="display:none;" ></span>
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.phoneNumber)
            </td>
            <td>
                @Html.TextBoxFor(model => model.phoneNumber, new { @class = "registerTextbox" })
                @Html.ValidationMessageFor(model => model.phoneNumber, "", new { @class = "error-message" })
            </td>
        </tr>
    </table> 
 </fieldset>
    
    <br />
<fieldset>
    <legend>Thông tin tài khoản</legend>
    <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td style="width:150px" > 
                @Html.LabelFor(model => model.username)
                <span class="necessary__value">*</span>
            </td>
            <td>
                @Html.TextBoxFor(model => model.username, new { @class = "registerTextbox" })
                
                @Html.ValidationMessageFor(model => model.username, "", new { @class = "error-message", @id = "errorForUsername" })
            </td>
        </tr>
        <tr>
            <td > 
                
            </td>
            <td>
                <div id="single_form_element">
                    <div class="chk_avlblty chk_pswd">
                        <span class="password-strength" id="thanhColorStrengPassword" ></span> 
                        <span class="strength-text" id="chuoiColorStrengPassword" >đánh giá password</span>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.password)
                <span class="necessary__value">*</span>
            </td>
            <td>
                @Html.PasswordFor(model => model.password, new { @class = "registerTextbox" })
                @Html.ValidationMessageFor(model => model.password, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.againPassword)
                <span class="necessary__value">*</span>
            </td>
            <td>
                @Html.PasswordFor(model => model.againPassword, new { @class = "registerTextbox" })
                @Html.ValidationMessageFor(model => model.againPassword, "", new { @class = "error-message" })
            </td>
        </tr>
        <tr>
            <td > 
                @Html.LabelFor(model => model.email)
                <span class="necessary__value">*</span>
            </td>
            <td>
                @Html.TextBoxFor(model => model.email, new { @class = "registerTextbox" })
                @Html.ValidationMessageFor(model => model.email, "", new { @class = "error-message", @id = "errorForEmail" })
            </td>
        </tr>
        <tr>
            <td > 
                Kiểm tra email/tên đang nhập?
            </td>
            <td>
                <input type="button" value="kiểm tra" style="width:55px; font-size:10px;" id="btnCheckAjax" />
            </td>
        </tr>
    </table> 
 </fieldset>
    
    <br />
<fieldset>
    <legend>Xác thực người dùng</legend>
    <table border="0" cellpadding="0" cellspacing="5">
        <tr>
            <td style="width:150px" > 
                Nhập mã kiểm tra
                <span class="necessary__value">*</span>
            </td>
            <td>
                @ReCaptcha.GetHtml(theme: "red")
            </td>
        </tr>
        <tr>
            <td > 
                
            </td>
            <td>
                <br />
                <input type="submit" value="Đăng ký"/>
            </td>
        </tr>
    </table> 
 </fieldset>
 
}


@{
    int min = AccountRegisterModel.minAgeOfCustomer;
    int max = AccountRegisterModel.maxAgeOfCustomer;
    int NamNay = DateTime.Now.Year;
    int tg = max;
    max = NamNay - min;
    min = NamNay - tg;
}
 @*phần javascript kiểm tra ngày tháng năm hợp lệ*@
<script type="text/javascript">
    function XuatThongBaoLoi(chuoi) {
        var labelThongBao = $("#errorForBirthDay");
        if (chuoi == null) {
            labelThongBao.hide();
        } else {
            labelThongBao.html(chuoi);
            labelThongBao.show();
        }
    }

    function kiemTraNgayThangNam() {
        var $theDate = $("#dateOfBirth");
        var $theMonth = $("#monthOfBirth");
        var $theYear = $("#yearOfBirth");
        var date, month, year;
        date = $theDate.attr("value");
        month = $theMonth.attr("value");
        year = $theYear.attr("value");

        var validate = new Validate();
        if (validate.trim2(date) == "" && validate.trim2(year) == "" && month == "0") {// ko chọn ngày tháng nào cả
            return null;
        }

        date = validate.parseToInt(date);
        if (isNaN(date) || date == null || date < 1 || date > 31) {
            return "Ngày phải là ngày hợp lệ từ 1 đến 31";
        }
        month = validate.parseToInt(month);
        if (isNaN(month) || month == null || month < 1 || month > 12) {
            return "Tháng phải là tháng hợp lệ từ 1 đến 12";
        }

        var minYear = parseInt("@min");
        var maxYear = parseInt("@max");
        year = validate.parseToInt(year);
        if (isNaN(year) || year == null || year < minYear || year > maxYear) {
            return "Năm phải là năm hợp lệ từ " + minYear + " đến " + maxYear;
        }

        var birthDay = validate.isValidDate2(date, month, year);
        if (birthDay == null)
            return "Lỗi: không tồn tại ngày " + date + " tháng " + month + " năm " + year + " !";
        return null; // ok, ngày hợp lệ !
    }

    function BoXuLyKiemTraNgayThangNam() {
        var chuoi = kiemTraNgayThangNam();
        XuatThongBaoLoi(chuoi);
        return chuoi;
    }

    $(document).ready(function (e) {
        //
        //// đăng ký bắt sự kiện để kiểm tra ngày tháng năm hợp lệ
        $("#dateOfBirth").change(BoXuLyKiemTraNgayThangNam);
        $("#monthOfBirth").change(BoXuLyKiemTraNgayThangNam);
        $("#yearOfBirth").change(BoXuLyKiemTraNgayThangNam);

        $("#frmRegister").submit(function (e) {
            var kq = BoXuLyKiemTraNgayThangNam();
            return kq == null;
        });
    });

</script>

@* kiểm tra độ mạnh yếu của password*@
<script type="text/javascript">
    
    $(document).ready(function (e) {
        
        // đăng ký kiểm tra độ mạnh của password
        $('#password').live('keyup', function () {
            var howStrong = checkStrength($(this).val());
            ////$('#chuoiColorStrengPassword').html(howStrong);
            var sColor = '#555';
            switch (howStrong) {
                case 'Strong':
                    $('#thanhColorStrengPassword').css('background-color', 'green');
                    $('#chuoiColorStrengPassword').html("Mạnh");
                    break;
                case 'Good':
                    $('#thanhColorStrengPassword').css('background-color', 'lightgreen');
                    $('#chuoiColorStrengPassword').html("Khá tốt");
                    break;
                case 'Weak':
                    $('#thanhColorStrengPassword').css('background-color', 'orange');
                    $('#chuoiColorStrengPassword').html("Yếu");
                    break;
                case 'Too short':
                    $('#thanhColorStrengPassword').css('background-color', 'red');
                    $('#chuoiColorStrengPassword').html("Quá ngắn");
                    break;
                default:
                    $('#thanhColorStrengPassword').css('background-color', '#555');
            }
        }).focusout(function () {
            $(this).trigger('keyup');
        });
    });
</script>

@*kiểm tra tính duy nhất của email/username thông qua AJAX*@
<script type="text/javascript">

    var thongBaoLoiUsername = "Username đã có người khác đăng ký, vui lòng chọn lại";
    var thongBaoUsernameHopLe = "Username hợp lệ!";
    var thongBaoCheckUsernameThatBai = "Có lỗi xảy ra, không kiểm tra được Username";

    var thongBaoLoiEmail = "Email đã có người khác đăng ký, vui lòng chọn lại";
    var thongBaoEmailHopLe = "Email hợp lệ!";
    var thongBaoCheckEmailThatBai = "Có lỗi xảy ra, không kiểm tra được Email";

    function Check_Exists(idTextBox, idErrorBox, urlServer, postName,
						thongBaoLoi, thongBaoHopLe, thongBaoCheckThatBai) {
        var $textBox = $("#" + idTextBox);
        var $errorBox = $("#" + idErrorBox);
        var validate = new Validate();
        var value = validate.trim2($textBox.attr("value"));

        if (value == "") return; // không check khi trường này bằng rỗng

        if ($errorBox.html() != "") return; // không check khi đang báo lỗi

        // ok, chấp nhận check
        $.ajax({
            type: "POST",
            url: urlServer,
            data: postName + "=" + value,
            success: function (message) {
                if (message != null && message != "") {
                    // xử lý để loại bỏ cái chuỗi quảng cáo vớ vẩn mà thằng somee bơm vô khi up lên host online :(
                    var vitri = message.indexOf("<" + "!" + "--");
                    if (vitri >= 0) {
                        message = message.substr(0, vitri);
                    }
                    //////////
                    if (message == "0")
                        $errorBox.html(thongBaoHopLe);
                    else $errorBox.html(thongBaoLoi);
                } else { 
                    $errorBox.html(thongBaoCheckThatBai);
                }
            },
            error: function () {
                $errorBox.html(thongBaoCheckThatBai);
            }
        });
    }

    $(document).ready(function (e) {

        // bắt sự kiện click của nút check
        $("#btnCheckAjax").click(function (e) {
            // check email
            Check_Exists("email", "errorForEmail", "/AJAX/EmailExists", "email",
			thongBaoLoiEmail, thongBaoEmailHopLe, thongBaoCheckEmailThatBai);

            // check username
            Check_Exists("username", "errorForUsername", "/AJAX/UsernameExists", "username",
			thongBaoLoiUsername, thongBaoUsernameHopLe, thongBaoCheckUsernameThatBai);
        });


        // mã validate của MVC tự động làm các thao tác xóa các đoạn thông báo này
        // muốn các thông báo này hiển thị như ý thì chỉ còn cách đặt các thông báo này riêng biệt ra vị trí khác !


//        // bắt sự kiện onchange của các textbox để ẩn thông báo trùng email/username khi người dùng 
//        // thay đổi các textbox này
//        $("#username").change(function (e) {
//            var $errorBox = $("#errorForUsername");
//            var thongBao = $errorBox.html();
//            if (thongBao == thongBaoLoiUsername || thongBao == thongBaoUsernameHopLe ||
//			thongBao == thongBaoCheckUsernameThatBai) $errorBox.html("");
//        });
//        $("#email").change(function (e) {
//            var $errorBox = $("#errorForEmail");
//            var thongBao = $errorBox.html();
//            if (thongBao == thongBaoLoiEmail || thongBao == thongBaoEmailHopLe ||
//			thongBao == thongBaoCheckEmailThatBai) $errorBox.html("");
//        });

//        // ngăn chặn ko cho form submit nếu có thông báo user/email xung đột
//        $("#frmRegister").submit(function (e) {
//            if ($("#errorForUsername").html() == thongBaoLoiUsername ||
//			$("#errorForEmail").html() == thongBaoLoiEmail)
//                return false;
//        });
    });

</script>